<template>
  <div>
    <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
    <el-card class="mt20">
      <el-form :inline="true" :model="searchInfo" ref="searchInfo">
        <el-form-item label="流水编号：" prop="tradeNo">
          <el-input v-model="searchInfo.tradeNo" @keyup.enter.native="$refs['telphone'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="供应商账号:" prop="telphone">
          <el-input ref="telphone" v-model="searchInfo.telphone"
                    @keyup.enter.native="$refs['userName'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="供应商企业名称:" prop="userName">
          <el-input ref="userName" v-model="searchInfo.userName"
                    @keyup.enter.native="$refs['type'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="结算事项:" prop="type">
          <el-select v-model="searchInfo.type" clearable placeholder="全部">
            <el-option ref="status" v-for="item in typeList" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <jxf-Date :startTime.sync="searchInfo.settleStartTime" :endTime.sync="searchInfo.settleEndTime"
                  label="结算时间段："></jxf-Date>
        <!--<el-form-item label="摘要:" prop="transCode">-->
          <!--<el-select v-model="searchInfo.transCode" clearable placeholder="全部">-->
            <!--<el-option ref="status" v-for="item in transCodeList" :key="item.value" :label="item.label"-->
                       <!--:value="item.value"></el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="onSearch()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header" class="clearfix">
        <span>数据列表</span>
        <div>
          <el-button type="primary" @click="exportInfo" :loading="isSuccess">导出</el-button>
        </div>
      </div>
      <jxf-table class="" :table="dataTable">
        <template slot="type" slot-scope="scope">
          <span>{{scope.row.type === 1 ? "入账" : scope.row.type === 2 ? "出账" : ""}}</span>
        </template>
        <template slot="transCode" slot-scope="scope">
            <span>{{scope.row.transCode === 1 ? "提前转出保理费" : ""}}
            </span>
        </template>
        <!--<template slot="operation" slot-scope="scope">-->
        <!--<el-button type="text" @click="showDetail(scope.row)">查看详情</el-button>-->
        <!--</template>-->
      </jxf-table>
    </el-card>
    <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                    @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'
  export default {
    name: "FactoringAccountFlow",
    data() {
      return {
        title: "保理账户流水",
        typeList: [{
          label: "入账",
          value: 1
        }, {
          label: "出账",
          value: 2
        }],
        // transCodeList: [{
        //   label: "提前转出保理费",
        //   value: 1
        // }],
        searchInfoBack: {
          tradeNo: "",
          telphone: "",
          userName: "",
          type: "",
          settleStartTime: "",
          settleEndTime: "",
          // transCode: ""
        },
        isSuccess: false,
        searchInfo: {
          tradeNo: "",
          telphone: "",
          userName: "",
          type: "",
          settleStartTime: "",
          settleEndTime: "",
          // transCode: ""
        },
        dataTable: {},
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0
      }
    },
    methods: {
      init() {
        this.dataTable = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '流水编号',
              width: '210',
              prop: 'tradeNo'
            },
            {
              id: '3',
              label: '供应商账号',
              width: '120',
              prop: 'telphone'
            },
            {
              id: '4',
              label: '供应商企业名称',
              minWidth: '120',
              prop: 'userName'
            },
            {
              id: '5',
              label: '结算事项',
              show: 'template',
              prop: 'type'
            },
            {
              id: '6',
              label: '结算金额',
              minWidth: '120',
              prop: 'amount'
            },
            {
              id: '8',
              label: '摘要',
              show: 'template',
              prop: 'transCode'
            },
            {
              id: '2',
              label: '结算时间',
              width: '160',
              prop: 'createTime'
            }
          ],
          data: []
        }
      },
      getList() {
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.post(apis.factory.getFacTradeList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.dataTable.data = this.formatData(res.data.dataList)
              } else {
                this.dataTable.data = []
              }
              this.dataTable.loading = false
            }
          })
      },
      // 列表数据处理
      formatData(list) {
        return list.map(item => {
          return {
            id: item.id,
            tradeNo: item.tradeNo,
            createTime: item.createTime !== null && item.createTime !== "" ? formatDate.timeFormat(item.createTime) : "",
            telphone: item.telphone,
            userName: item.userName,
            type: item.type,
            amount: item.amount,
            transCode: item.transCode
          }
        })
      },
      // 导出
      exportInfo(){
        this.isSuccess = true;
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.export(apis.factory.exportFacTradeList, info)
          .then(res => {
            this.isSuccess = false;
          })
      },
      onSearch() {
        this.currentPage = 1
        this.getList()
      },
      // 搜索表单重置
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.searchInfo = {...this.searchInfoBack}
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getList()
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.searchInfo = {...this.searchInfoBack}
        this.getList()
      }
    },
    created() {
      this.init()
      this.getList()
    }
  }
</script>

<style scoped>

</style>
